<template>
    <!--主界面-->
    <div class="uimain">
        <!--版心元素-->
        <div class="mainMain">
            <!--标题-->
            <div class="alarmClockTitle">Events list</div>
            <!--分割线-->
            <hr class="divider">

            <!--闹钟部分-->
            <div class="alarmClock">
                <!--闹钟上边区域-->
                <div class="alarmClockTop">
                    <!--标题-->
                    <div class="alarmClockTitle">
                        <span class="titles">Alarms</span>
                    </div>
                    <!--加号-->
                    <div class="addAlarm">
                        <span class="addAlarmText">+</span>
                    </div>
                </div>
                <!--闹钟下边区域-->
                <div class="alarmClockBottom">
                    <!--第一个闹钟-->
                    <div class="alarmClockItem">
                        <!--左边区域-->
                        <div class="alarmClockLeft">
                            <!--时间-->
                            <div class="alarmClockTimeMain">
                                <div class="alarmClockTime time">09</div>
                                <div class="colon">:</div>
                                <div class="alarmClockTime time">30</div>
                            </div>
                            
                            <!--日期-->
                            <div class="alarmClockDate data">Weekends</div>
                        </div>
                        <!--右边开关区域-->
                        <div class="alarmClockRight">
                            <img src="../assets/switch.png" alt="开关" class="switch">
                        </div>
                    </div>
                    <!--第二个闹钟-->
                    <div class="alarmClockItem">
                        <!--左边区域-->
                        <div class="alarmClockLeft">
                            <!--时间-->
                            <div class="alarmClockTimeMain">
                                <div class="alarmClockTime time">06</div>
                                <div class="colon">:</div>
                                <div class="alarmClockTime time">30</div>
                            </div>
                            <!--日期-->
                            <div class="alarmClockDate data">Mon-Fri</div>
                        </div>
                        <!--右边开关区域-->
                        <div class="alarmClockRight">
                            <img src="../assets/switch.png" alt="开关" class="switch">
                        </div>
                    </div>
                </div>
                
            </div>

            <!--分割线-->
            <hr class="divider">

            <!--定时器部分-->
            <div class="timers">
                <!--定时器上边区域-->
                <div class="timersTop">
                    <!--标题-->
                    <div class="timersTitle">
                        <span class="titles">Timers</span>
                    </div>
                    <!--加号-->
                    <div class="addAlarm">
                        <span class="addAlarmText">+</span>
                    </div>
                </div>
                <!--定时器下边区域-->
                <div class="timersBottom">
                    <!--第一个定时器-->
                    <div class="timersItem">
                        <!--左边区域-->
                        <div class="timersLeft">
                            <!--时间-->
                            <div class="alarmClockTimeMain">
                                <div class="alarmClockTime time">05</div>
                                <div class="colon">:</div>
                                <div class="alarmClockTime time">00</div>
                            </div>
                            <!--日期-->
                            <div class="timersDate data">Soft boiled egg</div>
                       </div>
                       <!--右边区域-->
                       <div class="timersRight">
                            <!--暂停按钮-->
                            <img src="../assets/pause.png" alt="暂停" class="pause timersimgs"></img>
                            <!--播放按钮-->
                            <img src="../assets/play.png" alt="播放" class="play timersimgs"></img>
                       </div>
                    </div>
                </div>
            </div>

            <!--分割线-->
            <hr class="divider">

            <!--倒计时部分-->
            <div class="countDowns">
                <!--倒计时上边区域-->
                <div class="tcountDownsTop">
                    <!--标题-->
                    <div class="countDownsTitle">
                        <span class="titles">CountDowns</span>
                    </div>
                    <!--加号-->
                    <div class="addAlarm">
                        <span class="addAlarmText lasetAdd">+</span>
                    </div>
                </div>
                <!--倒计时下边区域-->
                <div class="countDownsBottom">
                    <!--倒计时项目-->
                    <div class="countDownsItem">
                        <!--倒计时项目左侧图标-->
                        <div class="countDownsLeft">
                            <img src="../assets/icon.png" alt="倒计时图标" class="icon"></img>
                        </div>
                        <!--倒计时项目右侧-->
                        <div class="countDownsRight">
                            <div class="countDownsTime">182d until</div>
                            <div class="countDownsTitle">Honey birthday</div>
                        </div>
                    </div>
                </div>
            </div>

            <!--底部导航栏部分-->
            <div class="bottomNav">
                <div class="bottomNavMain">
                    <img src="../assets/clock.png" alt="时钟" class="clock navicon"></img>
                    <!--添加按钮-->
                    <div class="navAddAlarmMain">
                        <div class="navAddAlarm">
                        +
                        </div>
                    </div>
                    <img src="../assets/list.png" alt="列表" class="list navicon"></img>
                </div>
            </div>

        </div>
    </div>
</template>

<style scoped>
div{
    margin: 0;
    padding: 0;
}
.uimain{
    background-color: black;
    height: 100%;
    width: 100%;
    padding:30px 35px ;
}
.mainMain{
    height: 100%;
    width: 100%;
}
.alarmClockTitle,
.data{
    color: rgb(86, 87, 87);
}
.divider{
    width: 320px;
    margin-left: 0;
    margin-top: 15px;
    background-color:rgb(23, 23, 23);
    border: none;
    height: 2px;
}
.titles{
    color: white;
    font-weight: 600;
    float: left;
}
.addAlarmText{
    color: rgb(86, 87, 87);
    font-weight: 900;
    font-size: 20px;
    float: left;
    margin-top:-3px;
    margin-left: 250px;
}
.alarmClockTop,.timersTop,.tcountDownsTop{
    margin-top: 25px;
    overflow: hidden;
}
.time{
    color: white;
    font-size: 45px;
    font-weight: 700;
    margin-bottom: -5px;
    float: left;
}
.switch{
    width: 63px;
    float: right;
    margin-right: 65px;
    margin-top: 5px;
}
.alarmClockLeft{
    float: left;
}
.alarmClockItem{
    overflow: hidden;
    margin-bottom: 8px; 
}
.alarmClockItem:last-child,.timersItem{
    margin-bottom: 33px;
}
.timersItem,.countDowns{
    overflow: hidden;
}
.timersLeft{
    float: left;
}
.timersRight{
    float: right;
}
.timersimgs{
    width: 20px;
    margin-right: 70px;
    margin-top: 22px;
}
.pause{
    margin-right: 14px;
}
.lasetAdd{
    margin-left: 202px;
}
.countDownsItem{
    margin-top: 17px;
    background-color: rgb(23, 23, 23);
    width: 320px;
    height: 75px;
    border-radius: 12px;
}
.countDownsLeft{
    width: 55px;
    height: 55px;
    background-color:black ;
    float: left;
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 12px;
}
.icon{
    width: 50px;
    margin-left: 3px;
    margin-top: 1px;
}
.countDownsRight{
    padding-top: 12px;
    padding-left: 80px;
}
.countDownsTime{
    color: white;
}
.countDownsTitle{
    color:rgb(86, 87, 87) ;
}
.colon{
    color: white;
    margin: 0 5px 0 5px;
    font-size: 25px;
    padding-top: 11px;
    font-weight: 100;
    float: left;
}
.alarmClockTimeMain{
    overflow: hidden;
}
.bottomNavMain{
    overflow: hidden;
    margin: 50px;
    padding-left: 43px;
}
.navicon{
    width: 17px;
    float: left;
    margin-top: 16px;
}
.navAddAlarmMain{
    background-color: white;
    float: left;
    width: 50px;
    border-radius: 30px;
    height: 50px;
    margin: 0 27px;
}
.navAddAlarm{
    margin-top: -8px;
    padding-left: 10px;
    font-size: 40px;
}
</style>
